<style>
    td {
        border: 1px solid #D9E4EB;
    }

    th {
        border: 1px solid #D9E4EB;
        text-align: center;
    }
    input[disabled]{
        position: relative;
    }
    input[disabled]::before{
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: rgba(0,0,0,.2);
        border-radius: 50%;
        cursor:not-allowed;
    }
</style>
<form id="business_form" style="margin: 10px">
    <div style="margin:10px 20px;"></div>
    <table cellspacing="8" cellPadding="4" width="100%">
        <input type="hidden" name="id" value="<{$areas_info.area_id}>">
        
        
        
        <tr>
            <td width="100"><span style="color:red;">*</span>区域名称：</td>
            <td><input class="easyui-textbox" type="text" name="name" value="<{$areas_info.name}>" style="width:auto"
                       data-options="required:true"/>
            </td>
        </tr>
        <tbody id="province" style="display: none">
          <tr>
              <td width="100">
                  <div id="text_name">上级区域</div>
              </td>
              <td>
                  <input class="easyui-combobox" name="parent_id" style="width: 300px;" id="parent_value"
                         value="<{$areas_info.parent_name}>">
              </td>
          </tr>
          </tbody>
        <tr>
            <td width="100">
                选择级别
            </td>
            <td id='selLevel'>
                <if condition="isset($areas_info)">
                    <if condition="$areas_info.chk == 1">
                        <input type="radio" name="type" onclick="selected(1)" checked value="1"
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">一级区域
                        <input type="radio" name="type" onclick="selected(2)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">二级区域
                        <input type="radio" name="type" onclick="selected(2)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">三级区域
                        <elseif condition="$areas_info.chk == 2"/>
                        <input type="radio" name="type" onclick="selected(1)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">一级区域
                        <input type="radio" name="type" onclick="selected(2)" checked value="2"
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">二级区域
                        <input type="radio" name="type" onclick="selected(2)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">三级区域
                        <else/>
                        <input type="radio" name="type" onclick="selected(1)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">一级区域
                        <input type="radio" name="type" onclick="selected(2)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">二级区域
                        <input type="radio" name="type" onclick="selected(2)" checked value="3"
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">三级区域
                    </if>
                    <else/>
                    <input type="radio" name="type" value="1" onclick="selected(1)"
                           style="height: 13px;vertical-align:text-top; margin-top:2px;" checked>一级区域
                    <if condition="$fcount == 0">
                        <input type="radio" name="type" onclick="selected(2)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">二级区域
                        <else/>
                        <input type="radio" name="type" value="2" onclick="selected(2)"
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">二级区域
                    </if>
                    <if condition="$tcount == 0">
                        <input type="radio" name="type" onclick="selected(3)" disabled
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">三级区域
                        <else/>
                        <input type="radio" name="type" value="3" onclick="selected(3)"
                               style="height: 13px;vertical-align:text-top; margin-top:2px;">三级区域
                    </if>
                </if>
                <br>
                <span style="color: red;">(必须上级区域存在才允许添加下级区域,级别设定后,不可更改)</span>
            </td>
        </tr>
        <tr>
            <td width="100"><span style="color:red;">*</span>管理员：</td>
            <td>
                <table width="100%" cellspacing="8" cellPadding="4" id='set_areas_admin_list'>
                    <tr>
                        <th>姓名</th>
                        <th>短信通知</th>
                        <th>语音通知</th>
                        <th>APP推送</th>
                        <th>操作</th>
                    </tr>
                    <volist name="manage_info" id="info">
                        <tr id="manage<{$info.area_id}>" class="set-areas-manage__list">
                            <td style="text-align: center;"><{$info.username}></td>
                            <if condition="$info['is_open_msg']==1">
                                <td style="text-align: center;"><input type="checkbox"
                                                                       name="manange[<{$info.username}>][msg]" checked>
                                </td>
                                <else/>
                                <td style="text-align: center;"><input type="checkbox"
                                                                       name="manange[<{$info.username}>][msg]"></td>
                            </if>
                            <if condition="$info['is_open_call']==1">
                                <td style="text-align: center;"><input type="checkbox"
                                                                       name="manange[<{$info.username}>][call]" checked>
                                </td>
                                <else/>
                                <td style="text-align: center;"><input type="checkbox"
                                                                       name="manange[<{$info.username}>][call]"></td>
                            </if>
                            <if condition="$info['is_open_push']==1">
                                <td style="text-align: center;"><input type="checkbox"
                                                                       name="manange[<{$info.username}>][push]" checked>
                                </td>
                                <else/>
                                <td style="text-align: center;"><input type="checkbox"
                                                                       name="manange[<{$info.username}>][push]"></td>
                            </if>
                            <td style="text-align: center">[<a href="#"
                                                               onclick="delete_manage('<{$info.area_id}>')">删除</a>]
                            </td>
                        </tr>
                    </volist>
                    <tbody id="manange">

                    </tbody>
                </table>
                <table width="100%" cellspacing="8" cellPadding="4">
                    <tr>
                        <td><select name="users" id="mannage" class="easyui-combobox" style="width: 150px;">
                            <volist name="manager_list" id="name">
                                <option value="<{$name}>"><{$name}></option>
                            </volist>
                        </select><span style="margin-right: 20px;"></span><span class="easyui-linkbutton"
                                                                                onclick="add_manage()">添加管理员</span>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

    </table>
</form>
<script>
  var manangeList = <{:json_encode($manage_info)}> || [];
  var areas_info = '<{:json_encode($areas_info)}>' || [];
$.post("<{:U('admin/operation/get_level_for_area')}>?level=1'")
.then(function(res){
    // console.log('get',res);
    
    if((!res) || res.length == 0){
        $.each($('#selLevel').find('input'),function(index,item){
            // console.log(index,item.value)
            if(item.value != 1){
                item.disabled = 'disabled';
            }
        })
    }
})
  if (areas_info) {
    var info = devices = JSON.parse(areas_info);
    var $p = $('#province');
    var chk = 1;
    if (info) {
      chk = info.chk;
    }
    if (chk == 2) {
      $p.show();
      // $('#text_name').text('一级区域');
      // $('#parent_value').combobox({
      //   url: "<{:U('admin/operation/get_level_for_area')}>?level=1'",
      //   valueField: 'id',
      //   textField: 'name'
      // });
    }
    else if (chk == 3) {
      $p.show();
      // $('#text_name').text('二级区域');
      // $('#parent_value').combobox({
      //   url: "<{:U('admin/operation/get_level_for_area')}>?level=2'",
      //   valueField: 'id',
      //   textField: 'name'
      // });
    }
  }
  function add_manage() {
    var i = 1;//定义一个节点的id
    var name = $("#mannage").combobox("getValue");
    for (var index = 0; index < manangeList.length; index++) {
      var item = manangeList[index];
      if (item.username == name) {
        $.messager.alert('Warning', '已有此管理员!');
        return;
      }
    }
    var context = "";
    context += '<tr id="manage' + i + '"  class="set-areas-manage__list">' +
        '<input type="hidden" name="manange[' + name + ']" id="list">' +
        '<td style="text-align: center;">' + name + '</td>' +
        '<td style="text-align: center;"><input type="checkbox" name="manange[' + name + '][msg]"></td>' +
        '<td style="text-align: center;"><input type="checkbox" name="manange[' + name + '][call]"></td>' +
        '<td style="text-align: center;"><input type="checkbox" name="manange[' + name + '][push]"></td>' +
        '<td style="text-align: center">[<a href="#" onclick="delete_manage(' + i + ')" >删除</a>]</td>' +
        '</tr>';

    $("#manange").append(context);
    manangeList.push({
      username: name
    });
    i++;//节点数加1
  }
  //删除过滤参数
  function delete_manage(i) {
    $("#manage" + i).remove();
  }
  function selected(v) {
    var $p = $('#province');
    $p.hide();
    if (v == 2) {
      // $('#text_name').text('一级区域');
      $p.show();
      // $('#parent_value').combobox({
      //   url: "<{:U('admin/operation/get_level_for_area')}>?level=1'",
      //   valueField: 'id',
      //   textField: 'name'
      // });
    }
    else if (v == 3) {
      // $('#text_name').text('二级区域');
      $p.show();
      // $('#parent_value').combobox({
      //   url: "<{:U('admin/operation/get_level_for_area')}>?level=2'",
      //   valueField: 'id',
      //   textField: 'name'
      // });
    }
  }
</script>